import React from 'react';
import { Table, Button, Space } from 'antd';
import { EyeOutlined, DeleteOutlined } from '@ant-design/icons';
import { useState } from 'react';

// 自定义钩子
function useTableData() {
    const [data, setData] = useState([
        { key: '1', num: 'G01', nam1: 'xx标准', nam2: 'xx项目', dev: 'xx设备', pic: 'xx图片', fac: 'xx厂家', sta: '采购完成', det: 'xxx', action: 'act1' },
        { key: '2', num: 'G02', nam1: 'xx标准', nam2: 'xx项目', dev: 'xx设备', pic: 'xx图片', fac: 'xx厂家', sta: '采购完成', det: 'xxx', action: 'act2' },
        { key: '3', num: 'G03', nam1: 'xx标准', nam2: 'xx项目', dev: 'xx设备', pic: 'xx图片', fac: 'xx厂家', sta: '采购完成', det: 'xxx', action: 'act3' },
    ]);

    const handleDetails = (record: any) => {
        console.log('Details:', record);
    };

    const handleDelete = (key: string) => {
        setData(data.filter((item) => item.key !== key));
    };

    const exportData = () => {
        const csvContent = "data:text/csv;charset=utf-8," + data.map(e => Object.values(e).toString()).join("\n");
        const encodedUri = encodeURI(csvContent);
        const link = document.createElement("a");
        link.setAttribute("href", encodedUri);
        link.setAttribute("download", "table-data.csv");
        document.body.appendChild(link);
        link.click();
    };

    return { data, handleDetails, handleDelete, exportData };
}

const TableComponent: React.FC = () => {
    const { data, handleDetails, handleDelete, exportData } = useTableData();

    const columns = [
        {
            title: '序号',
            dataIndex: 'key',
            key: 'key',
        },
        {
            title: '标准编号',
            dataIndex: 'num',
            key: 'num',
        },
        {
            title: '标准名称',
            dataIndex: 'nam1',
            key: 'nam1',
        },
        {
            title: '项目名称',
            dataIndex: 'nam2',
            key: 'nam2',
        },
        {
            title: '设备名称',
            dataIndex: 'dev',
            key: 'dev',
        },
        {
            title: '生产厂家',
            dataIndex: 'fac',
            key: 'fac',
        },
        {
            title: '状态',
            dataIndex: 'sta',
            key: 'sta',
        },
        {
            title: '设备详情',
            dataIndex: 'det',
            key: 'det',
            render: (text: string, record: any) => (
                <Button type="link" onClick={() => handleDetails(record)}>
                    <EyeOutlined /> 查看
                </Button>
            ),
        },
        {
            title: '操作',
            key: 'action',
            render: (text: string, record: any) => (
                <Space size="middle">
                    <Button type="link" onClick={() => handleDetails(record)}>
                        <EyeOutlined /> 修改
                    </Button>
                    <Button type="link" onClick={() => handleDelete(record.key)}>
                        <DeleteOutlined /> 取消
                    </Button>
                </Space>
            ),
        },
    ];

    return (
        <>
            <Button type="primary" onClick={exportData} style={{ marginBottom: 16 }}>
                导出数据
            </Button>
            <Table dataSource={data} columns={columns} pagination={false} />;
        </>
    )
};

export default TableComponent;